<template>
  <el-dialog
    class="troila-dialog"
    :title="`${title}角色`"
    :visible.sync="dialogFormVisible"
    :modal-append-to-body="true"
    :append-to-body="true"
    width="600px"
  >
    <el-form
      class="troila-form"
      :label-width="formLabelWidth"
      :model="form"
      :rules="rules"
      ref="form"
    >
      <el-form-item label="角色名称" prop="roleName">
        <el-input
          v-model="form.roleName"
          auto-complete="off"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="权限字符" prop="roleCode">
        <el-input
          v-model="form.roleCode"
          auto-complete="off"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="form.remark"
          auto-complete="off"
          placeholder="请输入"
          type="textarea"
          rows="4"
          maxlength="100"
          show-word-limit
        ></el-input>
      </el-form-item>
      <!-- <el-form-item class="btn-box">
        <el-button type="primary" :loading="ajaxIng" @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="dialogFormVisible = false">{{
          ajaxIng ? '关 闭' : '取 消'
        }}</el-button>
      </el-form-item> -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="ajaxIng" @click="submitForm"
        >确 定</el-button
      >
      <el-button @click="dialogFormVisible = false">{{
        ajaxIng ? '关 闭' : '取 消'
      }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'roleForm',
  props: {
    value: {
      // row
      type: [Boolean, Object],
      default: false,
    },
  },
  data() {
    return {
      dialogFormVisible: false,
      title: '',
      form: {
        roleName: '',
        roleCode: '',
        remark: '',
      },
      formLabelWidth: '100px', //标题文字宽度
      rules: {
        // 规则
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
        ],
        roleCode: [
          { required: true, message: '请输入权限字符', trigger: 'blur' },
        ],
      },
      dictionary: {
        // 字典信息
        sex: [
          { dictName: '男', dictCode: '1' },
          { dictName: '女', dictCode: '2' },
        ],
        userStatus: [
          { dictName: '启用', dictCode: '1' },
          { dictName: '禁用', dictCode: '0' },
        ],
      },
      list: [],
      ajaxIng: false,
    }
  },
  watch: {
    value(v) {
      let show = v ? true : false
      this.dialogFormVisible !== show ? (this.dialogFormVisible = show) : null
      if (v) {
        this.roleId = v.id
        this.title = v === true ? '添加' : '修改'
        this.$refs.form ? this.$refs.form.resetFields() : null
        if (typeof v === 'object') {
          for (let k in this.form) {
            typeof this.form[k] == 'string' || typeof this.form[k] == 'number'
              ? (this.form[k] = v[k] || v[k] === 0 ? v[k] : '')
              : (this.form[k] = v[k] || v[k] === 0 ? [v[k]] : [])
          }
        } else {
          for (let k in this.form) {
            typeof this.form[k] == 'string' || typeof this.form[k] == 'number'
              ? (this.form[k] = '')
              : (this.form[k] = [])
          }
        }
      }
    },
    dialogFormVisible(v) {
      v ? null : this.$emit('input', v)
    },
  },
  methods: {
    submitForm() {
      if (this.ajaxIng) {
        return
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          let postData = {
            roleName: this.form.roleName,
            roleCode: this.form.roleCode,
            // roleSort: this.form.roleSort,
            remark: this.form.remark,
            // menuId: this.form.menus.join(','),
          }
          if (this.roleId) {
            postData.id = this.roleId
          } else {
            postData.state = true
          }
          this.ajaxIng = true
          this.API.roleManage[this.roleId ? 'updateRole' : 'addRole'](postData)
            .then((res) => {
              this.ajaxIng = false
              if (res.code == 1) {
                this.$alertFn.success(
                  this.roleId ? '修改角色成功' : '新建角色成功'
                )
                this.cancel()
                this.$emit('change')
              }
            })
            .catch((err) => {
              this.ajaxIng = false
            })
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    cancel() {
      this.dialogFormVisible = false
    },
  },
  created() {
    // this.getMenuList()
    if (this.$route.name == 'editRole') {
      this.roleId = this.decode(this.$route.params.roleId)
      this.roleId ? null : this.cancel()
      try {
        for (let k in this.$route.params.row) {
          this.form[k] = this.$route.params.row[k]
        }
        // this.form.menus = this.$route.params.row.menuIdList
      } catch (error) {
        this.cancel()
      }
    }
  },
}
</script>
<style  scoped>
</style>